<template>
  <div>
    <div class="main">
      <div class="header">
        <p class="txt">校园疫情监控数据-ECahrts可视化</p>
      </div>
      <div class="center">
        <div class="column">
          <div class="panel">
            <h2>人员-区域分布饼图</h2>
            <div id="chart1" style="height:280px;"></div>

            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>人员-出校园表格</h2>
            <ul style="display: flex;">
              <li
                      v-for="(item, index) in tableLabelEntry"
                      :key="index"
                      style="list-style: none; flex: 2;"
              >
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="tableDataEntry"
                    class="seamless-warp"
                    :class-option="{ step: 0.6 }"
            >
              <ul>
                <li
                        v-for="(item, index) in tableDataEntry"
                        :key="index"
                        style="list-style: none;"
                >
                  <span class="title" v-text="item.gate"></span>
                  <span class="title" v-text="item.name"></span>
                  <span class="title" v-text="item.phone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <el-row :gutter="10">
            <el-col :sm="12" :md="6" v-for="item in countData" :key="item.name">
              <div class="number">
                <el-card
                        shadow="hover"
                        :body-style="{ display: 'flex', padding: 0 }"
                        style="background: rgba(101, 132, 226, 0.02);border:0;"
                >
                  <div class="detail">
                    <p class="num">{{ item.name }}</p>
                    <p class="txt">{{ item.value }}</p>
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col :xl="12" class="mb20">
              <el-card
                      style="background: rgba(101, 132, 226, 0.02);border:0;"
                      :body-style="{ padding: 0 }"
              >
                <div class="map">
                  <div class="map1"></div>
                  <div class="map2"></div>
                  <div class="map3"></div>
                  <div id="chart" style="height:500px;top:100px"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="column">
          <div class="panel">
            <h2>人员-职位分布柱状图</h2>
            <line-chart
                    :chartData="echartData.person_role"
                    style="height:280px;"
            ></line-chart>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>人员-入校园表格</h2>
            <ul style="display: flex;">
              <li
                      v-for="(item, index) in tableLabelOut"
                      :key="index"
                      style="list-style: none; flex: 2;"
              >
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="tableDataOut"
                    class="seamless-warp"
                    :class-option="{ step: 0.6 }"
            >
              <ul class="item">
                <li
                        v-for="(item, index) in tableDataOut"
                        :key="index"
                        style="list-style: none;"
                >
                  <span class="title" v-text="item.gate"></span>
                  <span class="title" v-text="item.name"></span>
                  <span class="title" v-text="item.phone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LineChart from "@/components/echarts/line";
  import echarts from "echarts";
  import vueSeamlessScroll from "vue-seamless-scroll";
  import {
    getRolePerson,
    initChinaChart,
    getAreaPerson,
    initPieData,
  } from "../plugins/getCountPerson.js";
  export default {
    //  components: { elCol },
    /*eharts布局图大致设计方向
        recordDate: "入校日期",
          gate: "入校区域",
          name: "姓名",
          phone: "联系电话",
          position: "职位",
        */
    components: {
      LineChart,
      vueSeamlessScroll,
    },
    data() {
      return {
        countData: [
          {
            name: "今入校人次",
            value: 0,
            icon: "success",
            color: "#2ec7c9",
          },
          {
            name: "今离校人次",
            value: 0,
            icon: "success",
            color: "#2ec7c9",
          },
          {
            name: "现在校人数",
            value: 0,
            icon: "success",
            color: "#2ec7c9",
          },
          {
            name: "总人数",
            value: 0,
            icon: "success",
            color: "#2ec7c9",
          },
        ],
        time: 3000,
        refreshNum: 0,
        tableDataEntry: [],
        tableLabelEntry: ["入校区域", "姓名", "联系电话"],
        tableDataOut: [],
        tableLabelOut: ["出校区域", "姓名", "联系电话"],
        echartData: {
          person_role: {
            //折线图参数
            yAxis: {
              data: ["外来人员", "本科生", "研究生", "教工", "职工"],
            },
            series: [],
          },
          person_area: {
            series: [], //可以编辑一个饼图
          },
        },
      };
    },
    mounted() {
      // this.getEntryPersonData();
      // this.getOutPersonData();
      this.getRole();
      this.getArea();
      this.getUniversityPersonNum();
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        this.timer = setInterval(() => {
          //console.log("刷新" + new Date());
          this.getEntryPersonData();
          this.getOutPersonData();
        }, this.time);
      }
    },

    destroyed() {
      clearInterval(this.timer);
    },
    methods: {
      getEntryPersonData() {
        this.$http.record.findAll().then((res) => {
          // console.log(res.data);

          this.tableDataEntry = res.data;
          let k = 0;
          for (let i = 0; i < this.tableDataEntry.length; i++) {
            if (
                    (res.data[i].area.name=== "东门" ||
                            res.data[i].area.name === "北门" ||
                            res.data[i].area.name === "西门" ||
                            res.data[i].area.name === "南门") &&
                    res.data[i].direction === "A"
            ) {
              this.tableDataEntry[++k].gate = res.data[i].area.name;
              this.tableDataEntry[k].name = res.data[i].person.name;
              this.tableDataEntry[k].phone = res.data[i].person.phone;
            }

            //this.tableDataEntry[i].position = res.data[i].person.role;
          }
        });
      },
      getOutPersonData() {
        this.$http.record.findAll().then((res) => {
          this.tableDataOut = res.data;
          let k = 0;
          for (let i = 0; i < this.tableDataOut.length; i++) {
            if (
                    (res.data[i].area.name === "东门" ||
                            res.data[i].area.name === "北门" ||
                            res.data[i].area.name === "西门" ||
                            res.data[i].area.name === "南门") &&
                    res.data[i].direction === "B"
            ) {
              this.tableDataOut[++k].gate = res.data[i].area.name;
              this.tableDataOut[k].name = res.data[i].person.name;
              this.tableDataOut[k].phone = res.data[i].person.phone;
            }
            //this.tableDataOut[i].position = res.data[i].person.role + "10";
          }
        });
      },
      getRole() {
        initChinaChart();
        this.$http.person.findAll().then((res) => {
          let ps = res.data;
          this.echartData.person_role.series = getRolePerson(ps);
        });
      },
      getUniversityPersonNum() {
        initChinaChart();
        this.$http.record.findAll().then((res) => {
          let ps = res.data;
          let E = 0;
          let O = 0;
          this.countData[3].value = res.data.length;
          for (let i = 0; i < ps.length; i++) {
            if (ps[i].direction === "A") {
              E++;
            }
            if (ps[i].direction === "B") {
              O++;
            }
          }
          console.log(ps);
          this.countData[0].value = E;
          this.countData[1].value = O;
          this.countData[2].value =
                  this.countData[3].value - this.countData[1].value;
        });
      },
      getArea() {
        let areas = null;
        this.$http.area.findAll().then((res) => {
          //console.log(res.data);
          areas = res.data;
          initPieData(getAreaPerson(areas));
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  @import "~@/styles/index.scss";
</style>
